<template>
  <section class="work-section">
    <div class="work-item">
      <h2 class="work-title">
        党务工作
      </h2>
      <p class="work-text-all">党组织可通过平台完成党组织管理、党员管理等基础信息管理；对组织生活信息线上留痕管理，并在党务公开栏目进行展示，同时完成组织生活统计工作，实现看得见的、可量化的党建工作。</p>
    </div>
    <div class="work-content">

      <!--                党务工作左边栏部分-->
      <div class="work-left">
        <div class="work_left-item work-item-1">
          <h3>计信时讯<span>|计算机与信息科学学院</span></h3>

          <!--                        悬浮出现小三角-->
          <div class="work-triangle">
          </div>
        </div>
        <div class="work_left-item">
          <h3>产业论坛<span>|计算机与信息科学学院</span></h3>
          <div class="work-triangle">
          </div>
        </div>
        <div class="work_left-item">
          <h3>教育调研<span>|计算机与信息科学学院</span></h3>
          <div class="work-triangle">
          </div>
        </div>
        <div class="work_left-item">
          <h3>招聘快报<span>|计算机与信息科学学院</span></h3>
          <div class="work-triangle">
          </div>
        </div>
        <div class="work_left-item">
          <h3>竞赛通知<span>|计算机与信息科学学院</span></h3>
          <div class="work-triangle">
          </div>
        </div>
        <div class="work_left-item">
          <h3>访企拓岗<span>|计算机与信息科学学院</span></h3>
          <div class="work-triangle">
          </div>
        </div>
        <div class="work_left-item">
          <h3>三下乡<span>|计算机与信息科学学院</span></h3>
          <div class="work-triangle">
          </div>
        </div>
        <div class="work_left-item">
          <h3>多彩计e<span>|计算机与信息科学学院</span></h3>
          <div class="work-triangle">
          </div>
        </div>
        <div class="work_left-item">
          <h3>成果喜报<span>|计算机与信息科学学院</span></h3>
          <div class="work-triangle">
          </div>
        </div>
      </div>

      <!--                党务工作右边部分-->
      <div class="work-right">
        <div class="work_right-item">
          <ul class="work-module">
            <li class="work-list">
              <p class="work_right-text">
                计信学院在2022年人工智能类大赛中喜获佳绩
              </p>
              <span>2023-01-12</span>
              <div class="read-more">
                阅读
              </div>
            </li>
            <li class="work-list">
              <p class="work_right-text">
                计信学院在2022年人工智能类大赛中喜获佳绩
              </p>
              <span>2023-01-12</span>
              <div class="read-more">
                阅读
              </div>
            </li>
            <li class="work-list">
              <p class="work_right-text">
                计信学院毕业生党员感恩教育活动
              </p>
              <span>2023-01-12</span>
              <div class="read-more">
                阅读
              </div>
            </li>
            <li class="work-list">
              <p class="work_right-text">
                计信学院毕业生党员感恩教育活动
              </p>
              <span>2023-01-12</span>
              <div class="read-more">
                阅读
              </div>
            </li>
            <li class="work-list">
              <p class="work_right-text">
                计信学院毕业生党员感恩教育活动
              </p>
              <span>2023-01-12</span>
              <div class="read-more">
                阅读
              </div>
            </li>
            <li class="work-list">
              <p class="work_right-text">
                计信学院毕业生党员感恩教育活动
              </p>
              <span>2023-01-12</span>
              <div class="read-more">
                阅读
              </div>
            </li>
            <li class="work-list">
              <p class="work_right-text">
                计信学院毕业生党员感恩教育活动
              </p>
              <span>2023-01-12</span>
              <div class="read-more">
                阅读
              </div>
            </li>
            <li class="work-list">
              <p class="work_right-text">
                计信学院毕业生党员感恩教育活动
              </p>
              <span>2023-01-12</span>
              <div class="read-more">
                阅读
              </div>
            </li>
            <li class="work-list">
              <p class="work_right-text">
                计信学院毕业生党员感恩教育活动
              </p>
              <span>2023-01-12</span>
              <div class="read-more">
                阅读
              </div>
            </li><li class="work-list">
            <p class="work_right-text">
              计信学院毕业生党员感恩教育活动
            </p>
            <span>2023-01-12</span>
            <div class="read-more">
              阅读
            </div>
          </li>
          </ul>

          <!--                        上下页按钮-->
          <!--                        <div class="work-button work_button-1">-->
          <!--                            <h2>上一页</h2>-->
          <!--                        </div>-->
          <!--                        <div class="work-button work_button-2">-->
          <!--                            <h2>下一页</h2>-->
          <!--                        </div>-->
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>

</script>

<style scoped>
/*党务工作模块*/
.work-section{
  width:85%;
  height:70rem;
  /*background-color: yellow;*/
  margin: 0 auto;
  margin-top: 10rem;
  margin-bottom:2rem ;
}

.work-item{
  text-align: center;
  font-weight: bolder;
}
.work-title{
  font-size: 3rem;
  color:rgba(156, 0, 0, 1);

}
.work-text-all{
  width:65rem;
  height:15rem;
  margin: 0 auto;
  line-height: 3.5rem;
  letter-spacing: 3px;
  margin-top: 4rem;
  font-weight: bolder;
  font-size: 1.2rem;
}
.work-content{
  width:85%;
  height:50%;
  /*background-color: green;*/
  margin: 0 auto;
  display: flex;
}


.work-left{
  width:30%;
  height:45rem;
  /*padding:1rem;*/
  /*background-color: red;*/
}
.work_left-item{
  height:5rem;
  line-height: 5rem;
  background-color:#82111f;
  position: relative;
  transition: all 0.2s linear;
}

.work-item-1{

}
.work_left-item:not(:first-child) .work-triangle{
  opacity: 0;
}
.work_left-item:not(:first-child) .work-triangle{
  opacity: 0;
}
.work_left-item:hover .work-triangle{
  opacity: 1;
}
.work-triangle{
  /*background-color: green;*/
  background-color: white;
  width:2rem;
  height:2rem;
  position: absolute;
  right:0;
  top:30%;
  clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
}
.work_left-item h3{
  text-align: center;
  font-size: 2rem;
  color:white;
}
.work_left-item h3 span{
  font-size: 1rem;
  color:black;
}

.work-right{
  width:70%;
  height:45rem;
  padding:0 2rem;
  position: relative;
}
.work_right-item{
  width:100%;
  /*background-color: green;*/
}
.work-module{
  width:90%;
  margin: 0 auto;
  margin-top: -0.5rem;
}
.work-list{
  width:100%;
  height:3.5rem;
  list-style: none;
  /*background-color: green;*/
  position: relative;
  border-bottom: 2px solid lightgray;
}
.work-list:not(:first-child){
  margin-top: 1rem;
}
.work-list span{
  color:grey;
  position: absolute;
  right:20%;
  top:20%;
}
.work_right-text{
  font-size: 1.7rem;
  font-family: 楷体;
  line-height: 3rem;
}
.read-more{
  width:5rem;
  height:2.5rem;
  background-color: #82111f;
  text-align: center;
  line-height: 2.5rem;
  border-radius: 1rem;
  color:white;
  position: absolute;
  right:5%;
  top:10%;
}

.work-button{
  width:10rem;
  height:4rem;
  text-align: center;
  line-height: 4rem;
  border:0.3rem solid #82111f;
  /*margin: 3rem auto;*/
  color:#82111f;
  position: absolute;

}
.work_button-1{
  left:25%;
  top:87%;
}
.work_button-2{
  right:35%;
  top:87%;
}
</style>
